<template>
    <div class="page_lendMoney">
        <van-nav-bar :title="title" left-arrow @click-left="$router.back()">
            <template #right>
                <van-icon name="ellipsis" size="18" @click="showOverlay = true" />
            </template>
        </van-nav-bar>
        <van-overlay :show="showOverlay" @click="scan()" class-name="over_layer">
            <van-cell-group class="layer">
                <van-cell value="全部记录" @click.stop="actType(0, '钱包总记录')" />
                <van-cell value="充值记录" @click.stop="actType(2, '充值记录')" />
                <van-cell value="提现记录" @click.stop="actType(1, '提现记录')" />
                <van-cell value="借支记录" @click.stop="actType(3, '借支记录')" />
                <van-cell value="工资记录" @click.stop="actType(4, '工资记录')" />
                <van-cell value="代招费记录" @click.stop="actType(5, '代招费记录')" />
                <van-cell value="合作费记录" @click.stop="actType(6, '合作费记录')" />
                <van-cell value="股份分红记录" @click.stop="actType(8, '股份分红记录')" />
                <van-cell value="股份卖出记录" @click.stop="actType(10, '股份卖出记录')" />
                <van-cell value="企业提成记录" @click.stop="actType(11, '企业提成记录')" />
                <van-cell value="企业提成平台服务费记录" @click.stop="actType(12, '企业提成平台服务费记录')"
                    v-show="allUserInfo.id === SYSTEM_ACCOUNT" />
                <van-cell value="代招费平台服务费记录" @click.stop="actType(13, '代招费平台服务费记录')"
                    v-show="allUserInfo.id === SYSTEM_ACCOUNT" />
            </van-cell-group>
        </van-overlay>
        <!-- <div class="wallet_title" @click="select_wallet">
            <div class="title_date">
                <div>{{ walletfunc }}</div>
                <div class="date_icon">
                    <van-icon name="arrow-down" />
                </div>
            </div>
            <div class="title_total">支出 ¥{{ expen / 1000 }} 收入 ¥{{ incom / 1000 }}</div>
        </div> -->

        <div class="list_box">
            <div class="list" v-for="(item, index) in recordList" :key="index">
                <div class="list_img">
                  <van-image round cover :src="item.avatar" width="1.5rem" height="1.5rem" />
                </div>
                <div class="list_content">
                    <div class="name">呢称:{{ item.name ? item.name : '' }}</div>
                    <div class="list_content_up">
                        <div class="up_title">{{ item.title }}</div>
                        <div class="up_price">{{ item.qtype == '0' ? '+' : '-' }}{{ item.money / 1000 }}元</div>
                    </div>
                    <div class="list_content_time">{{ item.createdate }}</div>
                </div>
            </div>
        </div>

        <van-pagination v-show="total > 0" style="margin: 10px 0" v-model="pageIndex" :total-items="total"
            @change="handlePaginationChange">
            <template #prev-text>
                <van-icon name="arrow-left" />
            </template>
            <template #next-text>
                <van-icon name="arrow" />
            </template>
            <template #page="{ text }">{{ text }}</template>
        </van-pagination>

        <van-popup v-model="show" position="bottom" :overlay="true">
            <van-picker show-toolbar title="请选择日期" :columns="columns" value-key="time" @cancel="onCancel"
                @confirm="onConfirm" />
        </van-popup>
    </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {startConnection} from '../../utils/signalR'
import {lendMoneyList} from '../../constants/comUtils'
import {genDatePicker} from '@/utils/index.js';

import {SYSTEM_ACCOUNT} from "@/constants/systemAccount";

// const signalR = require("@microsoft/signalr");

export default {
  name: 'wallet',
  components: {

  },
  data() {
    return {
      SYSTEM_ACCOUNT,
      // connection: "",
      user: '',
      message: '',
      msgList: [],
      expen: '', //支出总额
      incom: '', //收入总额
      recordList: [],
      listId: 0,
      lendMoneyList,
      showOverlay: false,
      title: '钱包总记录',
      walletfunc: '',
      columns: [],
      show: false,
      walletList: [],

      date: '', // 查询日期
      pageIndex: 1, // 当前页
      pageSize: 10, // 每页显示条数
      total: 0 // 总记录数
    }
  },
  created() {
    this.columns = genDatePicker()
    let now = new Date()
    this.walletfunc = now.getFullYear() + '年'

    this.getFinancerecord()
  },
  computed: {
    ...mapGetters(['allUserInfo'])
  },
  mounted() {
    // 注释掉页面报错
    /*this.signalr.start().then(() => {
      console.log('连接')
    })*/
  },
  methods: {
    // 记录类型点击
    async actType(type, title) {
      this.showOverlay = false
      this.listId = type
      this.title = title
      this.pageIndex = 1

      this.getFinancerecord()
    },

    // 钱包交易记录
    async getFinancerecord() {
      this.recordList = []

      const params = {
        act: this.listId,
        date: this.date,
        pageIndex: this.pageIndex, // 当前页
        pageSize: this.pageSize // 每页显示条数
      }
      const res = await this.$api.job.financerecord(params)
      // console.log(res)
      if (res.code == 200) {
        this.recordList = res.data.record
        this.total = res.data.count || 0
        this.expen = res.data.fina.expen || 0
        this.incom = res.data.fina.incom || 0
      } else {
        this.total = 0
      }
    },

    scan() {
      this.showOverlay = false
    },

    select_wallet() {
      this.show = true
    },

    onCancel() {
      this.show = false
    },

    async onConfirm(picker, value, index) {
      this.show = false
      this.walletfunc = picker.time
      this.date = picker.date
      this.pageIndex = 1
      this.getFinancerecord()
    },

    // 分页点击
    handlePaginationChange(pageIndex) {
      this.pageIndex = pageIndex
      this.getFinancerecord()
    }
  }
}
</script>

<style lang="scss" scoped>
.wallet_title {
  height: 40px;
  padding: 5px 10px;
  .title_date {
    display: flex;
    font-size: 18px;
    .date_icon {
      padding-top: 4px;
    }
  }
  .title_total {
    color: #333;
    font-size: 16px;
  }
}
.over_layer {
  margin-top: 46px;
  height: 100%;
  .layer {
    width: 36%;
    font-size: 14px;
    position: absolute;
    right: 0;
    z-index: 2;
  }
}
.list_box {
  width: 100%;
  margin-top: 30px;
  .list {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    .list_img {
      margin-left: 10px;
      width: 50px;
      height: 50px;
      // background: red;
      border-radius: 25px;
    }
    .list_content {
      width: 80%;
      height: 60px;
      border-bottom: 1px solid #ccc;
      .name {
        font-size: 14px;
      }
      .list_content_up {
        font-size: 16px;
        padding-right: 10px;
        display: flex;
        justify-content: space-between;
        .up_title {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          max-width: 70%;
        }
        .up_price {
          color: rgb(255, 176, 0);
        }
      }
      .list_content_time {
        color: #888;
      }
    }
  }
}
</style>
